<script setup lang="ts">
import { ref } from "vue";
import { ElMessageBox } from "element-plus";
import StudyRecordItem from "@/views/student/components/studyRecordItem.vue";
import { getStudyStatus } from "@/api/user/user";
const studentStudyStatus = async () => {
  const res = await getStudyStatus({
    studentId: 210047301,
  });
  console.log(res, "res");

  const info: StudyRecord[] = [
    {
      title: `第${res.sectionId}章`,
      time: "2018/4/12",
      duration: "40min",
      progress: 50,
      children: [],
    },
  ];
  res.pointNames.forEach((item: any) => {
    const obj = {
      title: item.knowPointName,
      time: "2018/4/12",
      progress: item.expertly,
    };
    info[0].children.push(obj);
  });
  studyRecordData.value = info;
  console.log(studyRecordData.value, "studyRecordData");
};
onMounted(() => {});

const visible = ref(false);

const open = (id: any) => {
  visible.value = true;
  studentStudyStatus();
  console.log(id, "id");
};

const handleClose = async (done: () => void) => {
  await ElMessageBox.confirm("是否要关闭?");
  done();
};
interface StudyRecord {
  title: string;
  time: string;
  duration?: string; // 可选字段
  progress: number;
  children: Array<{
    title: string;
    time: string;
    progress: number;
  }>;
}

const studyRecordData = ref<StudyRecord[]>([]);
defineExpose({ open });
</script>

<template>
  <el-dialog v-model="visible" title="学习进度" width="900" :before-close="handleClose">
    <el-scrollbar height="70vh">
      <el-timeline class="timeline max-w-800px">
        <el-timeline-item
          v-for="(chapter, index) in studyRecordData"
          :key="index"
          :timestamp="chapter.time"
          placement="top"
        >
          <study-record-item :chapter="chapter" />
        </el-timeline-item>
      </el-timeline>
    </el-scrollbar>
  </el-dialog>
</template>

<style scoped lang="scss">
:deep(.el-timeline) {
  & .el-timeline-item:last-child .el-timeline-item__tail {
    display: block;
  }
}
</style>
